<template>
  <div class="comment">
      <h4>提交评论</h4>
      <textarea cols="30" rows="5" ref="textArea" placeholder="请输入评论信息"></textarea>
      <mt-button @click="putComment" size="large" type="primary">提交评论</mt-button>
        <h4>评论列表</h4>
        <div class="comment-list" v-for="(todo,idx) in commentData" :key="idx">
            <p>{{todo.content}}</p>
            <p> <span>{{todo.user_name}}</span> <span class="fr">{{todo.add_time | fmtDate}}</span></p>
        </div>
        <mt-button @click="getMoreData" size="large" type="danger" plain>加载更多</mt-button>
  </div>
</template>
<style scoped>
h4{
    padding-bottom: 5px;
    margin-top: 10px;
}
.comment{
    padding: 10px;
}
.comment-list{
    padding: 5px 0;
    border-top: 1px solid #999;
}
.fr{
    float: right;
}
</style>

<script>
    import { Toast } from 'mint-ui';
    import common from '../../static/common/common.js'
    export default{
        data(){
            return {
                commentData:[],
                pageIndex:1
            }
        },
        created(){
            this.getCommentData()
        },
        methods:{
            getCommentData(){
                const instance = Toast({
                    message: '正在加载',
                    position: 'middle',
                    duration: Infinity
                })
                const url = common.baseUrl+'api/getcomments/'+ this.commentId+'?pageindex='+this.pageIndex
                this.$http.get(url).then(res=>{
                    if(this.pageIndex == 1){
                        this.commentData = res.body.message;
                        return
                    }
                    this.commentData = this.commentData.concat(res.body.message)
                    instance.close();
                    Toast({
                        message: '加载成功',
                        position: 'middle',
                        duration: 500
                    })
                })
            },
            getMoreData(){
                this.pageIndex++
                this.getCommentData()
            },
            putComment(){
                let val = this.$refs.textArea.value;
                if(val.trim() == ''){
                    Toast({
                    message: '评论内容不能为空',
                    position: 'middle',
                    duration: 2000
                })
                val = ''
                return
                }
                const instance = Toast({
                    message: '提交评论',
                    position: 'middle',
                    duration: Infinity
                })
                const url = common.baseUrl+'api/postcomment/'+this.commentId
                this.$http.post(url,{content:val},{emulateJSON:true}).then(res=>{
                    console.log(res.body);
                    this.pageIndex = 1
                    this.getCommentData()
                    instance.close();
                    Toast({
                    message: res.body.message,
                    position: 'middle',
                    duration: 2000
                })
                val = '';                
                })
            }
        },
        props: ['commentId']
    }
</script> 